<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作日历计算工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }

        .input-section {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .input-group {
            flex: 1;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }

        select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .holiday-section {
            margin-bottom: 20px;
        }

        .holiday-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }

        .holiday-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .result-section {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 4px;
        }

        .result-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .result-item {
            background-color: #fff;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .result-label {
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .result-value {
            color: #333;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>工作日历计算工具</h1>

        <div class="input-section">
            <div class="input-group">
                <label>年份</label>
                <select id="year"></select>
            </div>
            <div class="input-group">
                <label>月份</label>
                <select id="month"></select>
            </div>
        </div>

        <div class="holiday-section">
            <label>节假日设置</label>
            <div class="holiday-list" id="holiday-list"></div>
        </div>

        <div class="result-section">
            <div class="result-grid">
                <div class="result-item">
                    <div class="result-label">当月总天数</div>
                    <div class="result-value" id="total-days">0</div>
                </div>
                <div class="result-item">
                    <div class="result-label">工作日天数</div>
                    <div class="result-value" id="work-days">0</div>
                </div>
                <div class="result-item">
                    <div class="result-label">节假日天数</div>
                    <div class="result-value" id="holiday-days">0</div>
                </div>
                <div class="result-item">
                    <div class="result-label">周末天数</div>
                    <div class="result-value" id="weekend-days">0</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const daysInMonth = (year, month) => new Date(year, month, 0).getDate();

        // 初始化年份选择器
        const yearSelect = document.getElementById('year');
        const currentYear = new Date().getFullYear();
        for (let year = currentYear - 5; year <= currentYear + 5; year++) {
            const option = document.createElement('option');
            option.value = year;
            option.textContent = year + '年';
            if (year === currentYear) option.selected = true;
            yearSelect.appendChild(option);
        }

        // 初始化月份选择器
        const monthSelect = document.getElementById('month');
        for (let month = 1; month <= 12; month++) {
            const option = document.createElement('option');
            option.value = month;
            option.textContent = month + '月';
            if (month === new Date().getMonth() + 1) option.selected = true;
            monthSelect.appendChild(option);
        }

        // 生成日期复选框
        function generateHolidayCheckboxes() {
            const year = parseInt(yearSelect.value);
            const month = parseInt(monthSelect.value);
            const days = daysInMonth(year, month);
            const holidayList = document.getElementById('holiday-list');
            holidayList.innerHTML = '';

            for (let day = 1; day <= days; day++) {
                const date = new Date(year, month - 1, day);
                const isWeekend = date.getDay() === 0 || date.getDay() === 6;

                const holidayItem = document.createElement('div');
                holidayItem.className = 'holiday-item';

                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.id = `day-${day}`;
                checkbox.checked = isWeekend;
                checkbox.addEventListener('change', updateResults);

                const label = document.createElement('label');
                label.htmlFor = `day-${day}`;
                label.textContent = `${day}日`;

                holidayItem.appendChild(checkbox);
                holidayItem.appendChild(label);
                holidayList.appendChild(holidayItem);
            }

            updateResults();
        }

        // 更新统计结果
        function updateResults() {
            const year = parseInt(yearSelect.value);
            const month = parseInt(monthSelect.value);
            const totalDays = daysInMonth(year, month);
            const holidayCheckboxes = document.querySelectorAll('#holiday-list input[type="checkbox"]');

            let holidayCount = 0;
            let weekendCount = 0;

            holidayCheckboxes.forEach((checkbox, index) => {
                const date = new Date(year, month - 1, index + 1);
                const isWeekend = date.getDay() === 0 || date.getDay() === 6;

                if (checkbox.checked) {
                    holidayCount++;
                }
                if (isWeekend) {
                    weekendCount++;
                }
            });

            const workDays = totalDays - holidayCount;

            document.getElementById('total-days').textContent = totalDays;
            document.getElementById('work-days').textContent = workDays;
            document.getElementById('holiday-days').textContent = holidayCount;
            document.getElementById('weekend-days').textContent = weekendCount;
        }

        // 事件监听
        yearSelect.addEventListener('change', generateHolidayCheckboxes);
        monthSelect.addEventListener('change', generateHolidayCheckboxes);

        // 初始化页面
        generateHolidayCheckboxes();
    </script>
</body>

</html>